<template>
  <div id="rose-chart">
    <div class="rose-chart-title">情绪分布</div>
    <dv-charts :option="option" />
  </div>
</template>

<script>
export default {
  name: "RoseChart",
  props: ["data"],
  data() {
    return {
      option: {},
    };
  },
  methods: {
    updateData(row) {
      let data = this.option.series[0].data;
      const { option } = this;
      let have = false;
      for (let j = 0; j < data.length; j++) {
        if (data[j].name == row.label2) {
          data[j].value++;
          have = true;
          break;
        }
      }
      if (!have) data.push({ name: row.label2, value: 1 });
      this.option.series[0].data = data;
      option;
      this.option = { ...this.option };
    },
    createData() {
      let init_data = [];
      for (let i = 0; i < this.data.length; i++) {
        let have = false;
        for (let j = 0; j < init_data.length; j++) {
          if (init_data[j].name == this.data[i].label2) {
            init_data[j].value++;
            have = true;
            break;
          }
        }
        if (!have) init_data.push({ name: this.data[i].label2, value: 1 });
      }
      this.option = {
        series: [
          {
            type: "pie",
            radius: "50%",
            roseSort: false,
            data: init_data,
            insideLabel: {
              show: false,
            },
            outsideLabel: {
              formatter: "{name} {value} {percent}%",
              labelLineEndLength: 20,
              style: {
                fill: "#fff",
              },
              labelLineStyle: {
                stroke: "#fff",
              },
            },
            roseType: true,
          },
        ],
        color: [
          "#da2f00",
          "#fa3600",
          "#ff4411",
          "#ff724c",
          "#541200",
          "#801b00",
          "#a02200",
          "#5d1400",
          "#b72700",
        ],
      };
    },
  },
  mounted() {
    this.createData();
  },
};
</script>

<style lang="less">
#rose-chart {
  width: 30%;
  height: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;

  .rose-chart-title {
    height: 50px;
    font-weight: bold;
    text-indent: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }

  .dv-charts-container {
    height: calc(~"100% - 50px");
  }
}
</style>
